<template>
  <view class="p-movie">
    <CHeader title="影片详情"></CHeader>
    <view class="movie-info-container">
      <view class="movie-bg" :style="{ backgroundImage: `url(${bg})` }"></view>
      <view class="movie-info">
        <image class="poster" mode="widthFix" :src="bg" :lazy-load="true"></image>
        <view class="content">
          <view class="title"> 人生大事 </view>
          <view class="item-cloumn"> 112分钟/家庭/喜剧/中国大陆 </view>
          <view class="item-cloumn"> 2022-06-24 18:00上映 </view>
          <view class="item-cloumn"> 评分 9.2 </view>
          <!-- <view :class="[isCanBuy ? 'sold-btn' : 'pre-sale-btn']">特惠购票</view> -->
        </view>
      </view>
      <view class="movie-describ-box">
        <view class="describ-lable">
          <view>简介</view>
          <view class="show-more" @click="showMore = true" v-show="!showMore">展开</view>
        </view>
        <view class="describ-text" :class="{ 'show-less': !showMore }">
          东南亚某国前特警队长东谷（安志杰饰）在执行法庭劫狱暴乱事件的任务中，罹患永久性失明，任务之后被迫承担失败责任，离开警队，回到了家中。东谷在女儿的陪伴下，他慢慢走出了那段痛苦的记忆，并适应了黑暗的世界，还练就一双灵敏的耳朵，可以听声辨位，然而曾经的宿敌再度出现，打破了这份美好，女儿的意外失踪，使得东谷踏上了救女之路，展开生死盲战。
        </view>
      </view>
    </view>
    <view class="movie-cast-container">
      <CNavTitle title="演员" background="" moreText="更多"></CNavTitle>
      <CSwiperList :list="[1, 2, 3, 4, 5, 6, 7, 8, 9]">
        <view class="cast-swiper-content">
          <image class="cast-image" mode="widthFix" :src="bg" :lazy-load="true"></image>
          <view class="cast-name">周杰伦</view>
          <view class="cast-major">导演</view>
        </view>
      </CSwiperList>

      <CNavTitle title="剧照" background=""></CNavTitle>
      <CSwiperList :list="[1, 2, 3, 4, 5, 6, 7, 8, 9]">
        <view class="cast-swiper-content">
          <image class="cast-image" mode="widthFix" :src="bg" :lazy-load="true"></image>
        </view>
      </CSwiperList>
    </view>
    <CEmpty></CEmpty>
    <view class="buy-btn">
      <view :class="[isCanBuy ? 'sold-btn' : 'pre-sale-btn']">特惠购票</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import Taro from '@tarojs/taro'
import CHeader from '@/components/c-header'
import CEmpty from '@/components/c-empty'
import CNavTitle from '@/components/c-nav-title'
import CSwiperList from '@/components/c-swiper-list'

const bg = ref('https://bkimg.cdn.bcebos.com/pic/b7fd5266d0160924ab1887db615422fae6cd7a899eea?x-bce-process=image/resize,m_lfit,w_536,limit_1/format,f_jpg')

const showMore = ref(false)

const isCanBuy = ref(true)
</script>

<style lang="scss">
@import '@/assets/styles/custom_theme.scss';
.p-movie {
  .movie-info-container {
    position: relative;
    width: 100%;
    min-height: 300px;
    padding: 14px;
    box-sizing: border-box;
    background: hsla(0, 0%, 100%, 0.65) border-box;
    .movie-bg {
      position: absolute;
      width: 100%;
      height: 320px;
      filter: blur(30px);
      -webkit-filter: blur(30px);
      background-size: 100%;
      background-position: center;
      background-repeat: no-repeat;
      z-index: -1;
    }
    .movie-info {
      display: flex;
      .poster {
        width: 108px;
        height: 152px;
        border-radius: 6px;
      }
      .content {
        flex: 1;
        height: 162px;
        font-size: 13px;
        line-height: 24px;
        color: $text-color;
        padding-left: 10px;
        position: relative;
        .title {
          color: $title-color;
          font-size: 18px;
          line-height: 36px;
          font-weight: 600;
        }
        .item-cloumn {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
    .movie-describ-box {
      width: 100%;
      min-height: 100px;
      padding: 10px;
      margin: 10px 0;
      border-radius: 6px;
      box-sizing: border-box;
      background: hsla(0, 0%, 100%, 0.6) border-box;
      .describ-lable {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        font-weight: 500;
        color: $title-color;
        .show-more {
          font-size: 12px;
          font-weight: 400;
          color: #27acff;
        }
      }
      .describ-text {
        margin: 5px 0;
        font-size: 11px;
        text-indent: 22px;
        color: $text-color;
      }
      .show-less {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        -webkit-box-orient: vertical;
      }
    }
  }
  .movie-cast-container {
    content: ' ';
    width: 100%;
    padding: 14px;
    box-sizing: border-box;
    margin-top: -15px;
    border-radius: 20px;
    background: white;
    .cast-swiper-content {
      display: flex;
      flex-direction: column;
      text-align: center;
      .cast-image {
        width: 68px;
        border-radius: 6px;
      }
      .cast-name {
        margin-top: 5px;
        font-size: 13px;
        color: $title-color;
      }
      .cast-major {
        font-size: 11px;
        color: $text-color;
      }
    }
  }
  .empty {
    content: ' ';
    width: 100%;
    height: 100px;
  }

  .buy-btn {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
    background: white;
    padding-bottom: 20px;
    .pre-sale-btn,
    .sold-btn {
      box-sizing: border-box;
      width: 100%;
      color: #fff;
      font-size: 16px;
      line-height: 42px;
      text-align: center;
      border-radius: 20px;
    }
    .pre-sale-btn {
      background: $secound-btn-bg-color;
      &:active {
        background: #27acff;
      }
    }
    .sold-btn {
      background: $primary-btn-bg-color;
      &:active {
        background: pink;
      }
    }
  }
}
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}
</style>
